<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="800" @ok="onPrint">
  <PageWrapper>
    <div style="text-align: right">
      <a-button type="primary" ghost @click="onPrint">打印</a-button>
    </div>
  <section ref="print" id="printContent">
    <a-col style="margin-top: 20px" :span="24">
<!--    <div style="text-align: center;" class="bg-image4">
      <div class="left-div">
        <a-upload style="text-align: left;"
                  action="/jsonplaceholder.typicode.com/posts/"
                  listType="picture-card"
                  :fileList="model.fileList"
                  @preview="handlePreview"
        >
        </a-upload>
      </div>-->
      <div style="text-align: center">
      <p style="font-size: 24px; font-weight: 800">{{recordData.contractName}}</p>
      </div>
    </a-col>
    <!--签字-->
    <a-col :md="24" :sm="24">
      <div class="sign" style="text-align: center; height: 200px;border: 1px solid gray;position: relative;">
        <a-col :span="24">
          <a-input readonly style="width: 30%" value="客户名称" />
          <a-input readonly style="width: 15%" value="联系人" />
          <a-input readonly style="width: 15%" value="联系电话" />
          <a-input readonly style="width: 15%" value="收款金额" />
          <a-input readonly style="width: 15%" value="付款方式" />
        </a-col>
        <a-col :span="24">
          <a-input readonly style="width: 30%" v-model:value="recordData.customerName" />
          <a-input readonly style="width: 15%" v-model:value="recordData.contacts" />
          <a-input readonly style="width: 15%" v-model:value="recordData.telephone" />
          <a-input readonly style="width: 15%" v-model:value="model.amountCollected" />
          <a-input readonly style="width: 15%" v-model:value="model.paymentMethod" />
        </a-col>
        <img class="stamp" src="https://shxt.gzxcbd.cn/jeecgboot/sys/common/static/temp/skzyz_1736352037892.png" alt="Stamp">
      </div>
    </a-col>
<!--    <div class="container">

      &lt;!&ndash; 其他内容 &ndash;&gt;
    </div>-->
<!--    <div class="sign bg-image3" style="text-align: center; height: 240px;border: 1px solid black;">-->
    <a-col :span="24" style="margin-top: 5px">
      <span>收款人:</span>
      <a-input readonly style="width: 80%" value="凯里市中程信息技术服务部" />
      <div style="text-align: left;">
      <img class="stamp3" :src="model.scanCodePayUrl" alt="Stamp">
      </div>
      <span>扫上方二维码或长按识别进行付款，请勿通过其他途径付款，以免造成不必要的经济损失。</span>
    </a-col>
    <a-col :span="24" style="margin-top: 5px">
      <span>投诉电话18085571310 18585856331 24小时设备故障服务电话0855-8123168</span>
    </a-col>
  </section>
  </PageWrapper>
  </BasicModal>
</template>

<script lang="ts" setup>
    import {ref, computed, unref,inject,reactive} from 'vue';
    import {BasicModal, useModalInner} from '/@/components/Modal';
    import {BasicForm, useForm} from '/@/components/Form/index';
    import {xcbdCollectionRecordFormSchema} from '../XcbdSalesContract.data';
    import {xcbdCollectionRecordSaveOrUpdate} from '../XcbdSalesContract.api';
    import {PageWrapper} from "@/components/Page";
    import {printJS} from "@/hooks/web/usePrintJS";
    import Icon from "@/components/Icon/src/Icon.vue";

    //接收主表id
    const mainId = inject('mainId');
    let recordDatas = inject('recordData') || ref({});
    //接收主表id
    const recordData = inject('recordData') || ref({});
    // Emits声明
    const emit = defineEmits(['register','success']);
    const isUpdate = ref(true);
    const isDetail = ref(false);
    const model = reactive({
      printer: '张三',
      printTime: '2021-12-31 23:59:59',
      amountCollected:'',
      paymentMethod:'',
      scanCodePayUrl:'',
      printContent: '打印内容：这是一个打印测试！',
      printReason: '做一个打印测试',
      fileList: [],
    });
    //表单配置
    const [registerForm, { setProps,resetFields, setFieldsValue, validate, scrollToField }] = useForm({
        labelWidth: 150,
        schemas: xcbdCollectionRecordFormSchema,
        showActionButtonGroup: false,
        baseColProps: {span: 12}
    });
    //表单赋值
    const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
        //重置表单
        await resetFields();
        setModalProps({confirmLoading: false,showCancelBtn:!!data?.showFooter,showOkBtn:!!data?.showFooter});
        isUpdate.value = !!data?.isUpdate;
        isDetail.value = !!data?.showFooter;
      model.scanCodePayUrl="https://shxt.gzxcbd.cn/jeecgboot/sys/common/static"+data.record.scanCodePayUrl;
      model.fileList=[]
      model.fileList.push(        {
        url: "https://shxt.gzxcbd.cn/jeecgboot/sys/common/static"+data.record.scanCodePayUrl,
      })
      model.amountCollected="¥"+data.record.amountCollected;
      // model.paymentMethod=data.record.paymentMethod;
      model.paymentMethod="微信";
        console.log("record=======",data.record.scanCodePayUrl)
        if (unref(isUpdate)) {
            //表单赋值
            data.record.contractName=recordData.value.contractName;
          data.record.customerName=recordData.value.customerName;
          data.record.contacts=recordData.value.contacts;
          data.record.telephone=recordData.value.telephone;
            await setFieldsValue({
                ...data.record,
            });
        } else {
          data.record=recordData.value;
          //表单赋值
          await setFieldsValue({
            ...data.record,
          });
        }
        // 隐藏底部时禁用整个表单
       setProps({ disabled: !data?.showFooter })
    });
    //设置标题
    const title = computed(() => (!unref(isUpdate) ? '新增' : !unref(isDetail) ? '详情' : '编辑'));
    //表单提交事件
    async function handleSubmit(v) {
        try {
            let values = await validate();
            setModalProps({confirmLoading: true});
            if (unref(mainId)) {
                values['salesContractId'] = unref(mainId);
             }
            //提交表单
            await xcbdCollectionRecordSaveOrUpdate(values, isUpdate.value);
            //关闭弹窗
            closeModal();
            //刷新列表
            emit('success');
        } catch ({ errorFields }) {
          if (errorFields) {
            const firstField = errorFields[0];
            if (firstField) {
              scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
            }
          }
        } finally {
            setModalProps({confirmLoading: false});
        }
    }
    function onPrint() {
      printJS({
        printable: '#printContent',
        type: 'html',
      });
    }
</script>
<style lang="less" scoped>
	/** 时间和数字输入框样式 */
  :deep(.ant-input-number) {
    width: 100%;
  }

  :deep(.ant-calendar-picker) {
    width: 100%;
  }
  .bg-image {
    background-image: url('https://shxt.gzxcbd.cn/jeecgboot/sys/common/static/temp/skzyz_1736352037892.png'); /* 设置背景图片 */
    background-repeat: no-repeat; /* 防止背景图片重复 */
    background-position: right bottom; /* 将图片放置在右下角 */
    //text-align: center;
    height: 165px; /* 元素高度 */
    display: flex;
    justify-content: center;
    //align-items: center;
    -webkit-print-color-adjust: exact !important; /* 强制打印背景图片 */
    print-color-adjust: exact !important; /* 标准属性，但可能不被所有浏览器支持 */
    position: absolute;
    right: 0;
    bottom: 0;
    //width: 80px; /* 印章宽度 */
    //height: 80px; /* 印章高度 */
    /* 可选：如果要旋转印章 */
    transform: rotate(-45deg); /* 逆时针旋转45度 */
  }
  /* 使文字位于背景图片之上 */
  .bg-image p {
    padding-top: 30px;
    z-index: 1; /* 确保文字在背景图片上方 */
  }
  input {
    border: none;
  }
  .left-div {
    flex: 0 0 auto; /* 不伸缩，固定宽度 */
    padding: 10px;
    margin-top: 17px;
    margin-right: 10px; /* 右边距，使得中间的div不会紧贴左边的div */
  }

  .middle-div {
    flex: 1; /* 伸缩，占据剩余空间 */
    padding: 10px;
    margin-left: -140px;
  }
  .container {
    position: relative;
    width: 300px; /* 或者你需要的宽度 */
    height: 200px; /* 或者你需要的高度 */
    /* 其他样式 */
  }

  .stamp {
    position: absolute;
    right: 18px;
    bottom: -80px;
    z-index: 100;
    transform: rotate(-10deg); /* 逆时针旋转45度 */
    /* 其他样式 */
  }
</style>
